<template>
  <div>
    <nav-top class="nav"
             NavI="true"
             Licon="more"
             Ricon="search"
             title="序列号"
             @callback="callback"></nav-top>

    <div class="serial gl-content">
      <div class="search-list">
        <gl-picker class="search por"
                   title="队员选择"
                   :value="activeProxy"
                   @sure="selectProxy"
                   :options="person">
          {{
          activeProxy[0] && activeProxy[0].id
          ? activeProxy[0].name
          : "队员选择"
          }}
          <img src="../../../assets/images/icon/class_upArrow.png" />
        </gl-picker>
        <gl-picker class="search por"
                   title="学校选择"
                   :value="activeSchool"
                   @sure="selectSchool"
                   :options="school"
                   value-key="name">
          {{
          activeSchool[0] && activeSchool[0].id
          ? activeSchool[0].name
          : "学校选择"
          }}
          <img src="../../../assets/images/icon/class_upArrow.png" />
        </gl-picker>
      </div>
      <div class="counts flex tac">
        <div class="count flex-1"
             v-for="(count, i) in counts"
             :key="i">
          <div class="value wsnw">{{ count.prev }}{{ info[count.prop] || 0 }}</div>
          <div class="name">{{ count.name }}</div>
        </div>
      </div>
      <load-more class="list load_more"
                 @loading="moreLoading"
                 @bottom="loadBottom"
                 show-bottom
                 :no-data="allLoaded">
        <div class="item flex jcb"
             v-for="(item, i) in list"
             :key="i"
             @click="toDetail(item.id, i)">
          <div class="left flex-col jcb">
            <div class="top wsnw serialName">{{ item.name }}</div>
            <div class="bottom wsnw" >已激活/剩余：{{ item.count }}/{{ item.amount - item.count }}</div>
          </div>
          <div class="right flex-col jcb">
            <div class="top wsnw num">
              <span class="inner">收入：</span>
              ￥{{ item.real_pay.toFixed(2) }}
            </div>
            <div class="bottom">{{ item.xname }}</div>
          </div>
        </div>
        <div class="tips"
             v-if="!list.length">暂无数据</div>
      </load-more>
      <!--<load-more-tip :noData="allLoaded" :loading="loadingMore"></load-more-tip>-->
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Serial',
  computed: {
    ...mapGetters(['userInfo', 'proxy_id', 'proxy_type'])
  },
  data() {
    return {
      list: [],
      info: {
        active: '',
        pay: '',
        have: ''
      },
      load: false,
      counts: [
        {
          prop: 'active',
          name: '已激活',
          prev: ''
        },
        {
          prop: 'pay',
          name: '已支付',
          prev: ''
        },
        {
          prop: 'have',
          name: '总收入',
          prev: '￥'
        }
      ],
      person: [],
      school: [],
      params: {
        sid: '',
        pid: ''
      },
      activeSchool: [],
      activeProxy: [],
      allLoaded: false,
      num: 0, // 页码
      limits: 10, // 条数
      listInfo: '',
      batchId: '', // 批次id
      school_id: '', // 学校id
      loadingMore: false
    }
  },
  created() {
    this.batchId = this.proxy_id
    this.Http.getProxyList({
      proxy_id: this.proxy_id,
      proxy_type: this.proxy_type,
      get_team_data: true
    })
      .then(res => {
        // console.log(res);
        if (res.length) {
          res.unshift({
            name: '全部',
            id: ''
          })
          this.person = res
        } else {
          this.person = [
            {
              id: 0,
              name: '暂无数据'
            }
          ]
        }
      })
      .catch(this.$err)
    // 序列号统计
    this.getSerialList()
    this.getSchoolList()
  },
  mounted() {},
  methods: {
    ...mapMutations(['setSerialDetail', 'setLeftScope']),
    getSchoolList(proxy_id) {
      this.Http.getSchoolProxyList({
        proxy_id: proxy_id || this.proxy_id
      })
        .then(res => {
          // console.log(res);
          if (res.length) {
            res.unshift({
              name: '全部',
              id: ''
            })
            this.school = res
          } else {
            this.school = [
              {
                id: 0,
                name: '暂无数据'
              }
            ]
          }
        })
        .catch(this.$err)
    },
    // 序列号统计数据
    getSerialList() {
      this.Http.getSerialList({
        proxy_id: this.batchId || this.proxy_id,
        type: 1,
        school_id: this.school_id
      })
        .then(res => {
          // console.log(res);
          this.info = {
            active: res.act_count,
            have: res.real_pay.toFixed(2),
            pay: res.pay_count
          }
        })
        .catch(console.log)
    },
    // 批次列表
    getCardOrderList(cb) {
      this.Http.getCardOrderList({
        proxy_id: this.batchId || this.proxy_id,
        type: 1,
        curr: this.num,
        limits: this.limits,
        school_id: this.school_id
      })
        .then(res => {
          // console.log(res.list);
          // this.load = true;

          if (this.num === 1) {
            this.list = []
          }
          this.listInfo = res
          this.list.push(...res.list)
          // console.log(this.list);
          this.allLoaded = res.total <= this.list.length

          cb && cb()
        })
        .catch(this.$err)
    },
    // 点击事件
    callback(val) {
      // console.log(val);
      if (val === 'search') {
        this.$router.push({
          name: 'SerialSearch',
          params: {
            init: 1
          }
        })
      }
      if (val === 'more') {
        this.setLeftScope(true)
      }
    },
    getList() {},
    // 跳转到详情页
    toDetail(id, index) {
      this.$router.push({
        name: 'SerialDetail',
        params: {
          id
        }
      })
      // console.log(this.list[index])
      this.setSerialDetail(this.list[index])
    },
    // 学校选择
    selectSchool(res, c) {
      // console.log(res[0].id);
      this.activeSchool = res
      c()
      this.school_id = res[0].id
      this.num = 1
      this.getCardOrderList()
      this.getSerialList()
    },
    // 队员选择
    selectProxy(res, c) {
      // console.log(res[0].id);
      this.activeProxy = res

      this.activeSchool = this.school[0]
      this.school_id = ''

      c()
      this.batchId = res[0].id
      this.getSchoolList(this.batchId)
      // console.log(this.proxy_id)
      this.num = 1
      this.getCardOrderList()
      this.getSerialList()
    },

    loadTop(e) {
      // console.log("top");
    },
    moreLoading(val) {
      this.loadingMore = val
    },
    loadBottom(e) {
      // if (this.load) {
      // console.log("more");
      this.num++
      this.getCardOrderList(e)

      // console.log("bottom");
      // }
    }
  }
}
</script>

<style scoped lang="less">
.serial {
  min-height: calc(100vh - 175px);
}

.search-list {
  margin-bottom: 34px;

  .search {
    padding: 12px 18px;
    font-size: 26px;
    color: #676a6b;
    background: rgba(240, 242, 245, 1);
    border-radius: 24px;

    &:not(:last-child) {
      margin-right: 40px;
    }

    img {
      width: 20px;
      height: 12px;
      overflow: hidden;
      padding-left: 7px;
    }
  }
}

.counts {
  margin-bottom: 40px;
  padding: 50px 0 32px;
  background: linear-gradient(
    -83deg,
    rgba(20, 200, 255, 1),
    rgba(2, 151, 255, 1)
  );
  box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
  border-radius: 20px;
  color: #fff;
  font-size: 24px;
  line-height: 1;

  .count {
    height: 60px;

    &:not(:first-child) {
      border-left: 1px #e8e8e8 solid;
    }
  }

  .value {
    margin: -16px 0 24px;
    font-size: 36px;
    font-weight: bold;
  }
}

.load_more {
  width: 679px;
  height: calc(100vh - 450px);
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  background: #fff;
  color: #999;
  font-size: 24px;
}

.list {
  color: #999;
  font-size: 24px;

  .item {
    padding: 34px 30px;

    &:not(:last-child) {
      border-bottom: 1px solid #e8e8e8;
    }

    > :nth-child(n) {
      height: 82px;
      line-height: 1;
    }

    .top {
      color: #222;
      font-size: 36px;
      font-weight: bold;
      font-family: PingFang SC;

      .inner {
        color: #999;
        font-size: 24px;
        text-align: center;
      }
    }

    .right {
      width: 250px;
    }
  }
}

.tips {
  font-size: 32px;
  text-align: center;
  margin-top: 40px;
}

.serialName {
  width: 350px;
  white-space: normal;
  padding-bottom: 20px;
  line-height: 40px;
  max-height: 60px;
  
}

.nav {
  background-color: #f7f8fa;
}
</style>